<!DOCTYPE HTML>
<html>
<head>
<title>Html5 Canvas Path Grids</title>
</head>
<body>

 <canvas id="c" height="600" width="850"></canvas>
<script type="text/javascript">
//画竖线
var c = document.getElementById("c");
var context = c.getContext("2d");
for(var x=0.5;x< 800;x += 20){
 context.moveTo(x,0);
 context.lineTo(x,600);
}
//画横线
for(var y=0.5;y< 600;y += 20){
  context.moveTo(0,y);
  context.lineTo(800,y);
}
//选择颜色
context.strokeStyle = "#e5e5e5";
//渲染
context.stroke();
//XY坐标系
//开始新的路径
//y轴
context.beginPath();
context.moveTo(360,580);
context.lineTo(360,30);
context.moveTo(355,35);
context.lineTo(360,30);
context.lineTo(365,35);
//x轴
context.moveTo(760,280);
context.lineTo(30,280);
context.moveTo(755,275);
context.lineTo(760,280);
context.lineTo(755,285);
//选择颜色
 context.strokeStyle = "#000";
//渲染
context.stroke();
 //填充文字
context.font = "bold 16px serif";
context.fillText("x",750,300);
context.fillText("y",340,40);
context.fillText("0",345,275);
context.fillText("π",526,296);
context.fillText("2π",720,296);
//画曲线 sin曲线
context.beginPath();
context.moveTo(30,230);
for(var x=30;x< 750;x++){
 context.lineTo(x,-100*Math.sin((x-360)*Math.PI/180)+280)
}
context.strokeStyle = "#FF0000";
context.stroke();
//画曲线 cos曲线
context.beginPath();
context.moveTo(30,195);
for(var x=30;x< 750;x++){
 context.lineTo(x,-100*Math.cos((x-360)*Math.PI/180)+280)
}
context.strokeStyle = "#8B7500";
context.stroke();
//画曲线 tan曲线
 context.beginPath();
context.moveTo(30,730);
for(var x=271;x< 449;x++){
 context.lineTo(x,-100*Math.tan((x-360)*Math.PI/180)+280)
}
 context.strokeStyle = "#0000ff";
 context.stroke();
</script></body></html>
<!-- 
  2022年8月24日制作
 -->